<template>
  <div class="dy-main LivingPaymentEnter">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">生活缴费<a slot="right" @click="toHistory">历史明细</a></x-header>
    </div>
    <div class="dy-body">
      <div class="topMessage">
          <p slot="title"><img src="../../assets/img/Living/water.png" alt="" class="water"><span>水费</span></p>
          <p slot="value" style="float:right;"><span>上海</span><img src="../../assets/img/Living/station.png" alt="" class="station"></p>
      </div>
      <p class="title">选择缴费单位</p>
      <group gutter="0">
        <cell title="上海城投水务（集团）有限公司" is-link @click.native="toNext"></cell>
      </group>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      aaa: 1
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    toNext () {
      this.$router.push({name: 'LivingPaymentCheckEnt'})
    },
    toHistory () {
      this.$router.push({name: 'LivingPaymentHistory'})
    }
  }
}
</script>
<style lang="less">
.LivingPaymentEnter{
  .topMessage{
    width: 100%;
    padding: 0 .27rem;
    background: #fff;
    line-height: .88rem;
    overflow: hidden;
    font-size: .26rem;
    &>p{
      float: left;
      span{
        display: inline-block;
        padding:0 .12rem;
      }
    }
  }
  .title{
    line-height: .94rem;
    font-size: .25rem;
    color: #999;
    padding: 0 .27rem;
  }
  .water{
    width: .36rem;
    height: .39rem;
    vertical-align: sub;
  }
  .station{
    width: .38rem;
    height: .46rem;
    vertical-align: sub;
  }
}
</style>
